<!DOCTYPE html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>earth</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
	<script src="js/echarts-gl.js"></script>
	<script src="js/echarts-min-gl.js"></script>
	<script src="js/toggle.js"></script>
	<link href="css/earth.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="knowledge" style="color:white;"><h2>你知道这些吗？</h2>
		<div id="earth_most">
		<pre>
  <a id="zgf" onclick="change(this)" style="cursor:pointer;">世界最高峰</a>
  <a id="hg" onclick="change(this)"style="cursor: pointer;">最深的海沟</a>
  <a id="zdpy" onclick="change(this)"style="cursor: pointer;">最大的平原</a>
  <a id="dqsx" onclick="change(this)"style="cursor: pointer;">地球的属性</a>
		</pre>
		</div>
	</div>
	
    <div id="earth" ></div>
	<img id="pic" src="" />
	<textarea id="ajax" >
	
	</textarea>
    <script type="text/javascript">
	<!-- 显示信息 -->
		function change(btn){
			var pic=document.getElementById('pic');
			var myJson={"世界最高峰":"image/most_mountain.jpg","最深的海沟":"image/most_hg.jpg","最大的平原":"image/most_py.jpg","地球的属性":"image/earth_info.jpg"};
			for(var key in myJson){
				if(key==btn.innerText)
				pic.src=myJson[key];
			}
		};
		<!-- 显示TXT信息 -->
		$(document).ready(function(){
		  $("#dqsx").click(function(){
			$("#ajax").load('zhishi/地球的知识图谱.txt');
		  });
		  $("#zdpy").click(function(){
			$("#ajax").load('zhishi/最大的平原.txt');
		  });
		  $("#hg").click(function(){
			$("#ajax").load('zhishi/海沟.txt');
		  });
		  $("#zgf").click(function(){
			$("#ajax").load('zhishi/最高峰.txt');
		  });
		});
		<!-- 3D地球 -->
            var  earth = echarts.init(document.getElementById('earth'));      
              earth_option = {
					left:200,
					backgroundColor: '#000',
					globe: {
						show:true , 
						environment: "image/plant.jpg",
						baseTexture: "image/earth1.jpg",
						heightTexture: "image/earth2.jpg",
						displacementScale: 0.04,
						shading: 'realistic',
						viewControl:{
							projection:'perspective',
							autoRotateDirection:'ccw',
							autoRotateSpeed:15,
							panSensitivity:1,
							alpha:-30,
							targetCoord:[116.46,39.92],
						},
						realisticMaterial: {
							roughness: 0.7
						},
						postEffect: {
							enable: true
						},
						light: {
							main: {
								intensity: 5,
								shadow: false
							},
							ambient:{
								intensity:0.2
							},
							ambientCubemap: {
								diffuseIntensity: 0.5,
								texture:'image/lql1.hdr'
							},
						}
					}
				};
                earth.setOption(earth_option);
    </script>
</body>